<template>
  <div class="qr-generator">
    <h2>扫码测试</h2>
    <!-- 生成包含跳转链接的二维码 -->
    <vue-qr 
      :text="qrUrl" 
      :size="200" 
      :margin="10"
      colorDark="#000000"
      colorLight="#ffffff"
    ></vue-qr>
    <p>请使用微信/支付宝/浏览器扫码</p>
  </div>
</template>

<script>
import VueQr from 'vue-qr'

export default {
  components: { VueQr },
  data() {
    return {
      // 替换为你的实际域名/IP，确保扫码设备能访问
      qrUrl: `${window.location.origin}/scan-result` 
    }
  },
  mounted(){
    // 获取局域网IP（开发环境）
    const localIp = this.getLocalIP()
    // 拼接扫码结果页地址
    this.qrUrl = `http://${localIp}:8080/scanResult`
  },
  methods:{
    getLocalIP() {
      // 开发环境下可手动替换为电脑的局域网IP（如 192.168.1.105）
      // 生产环境可通过 window.location.host 获取
      return process.env.NODE_ENV === 'development' 
        ? '192.168.10.17' // 替换为你的电脑实际局域网IP
        : window.location.hostname
    }
  }
}
</script>

<style scoped>
.qr-generator {
  text-align: center;
  padding: 50px;
}
</style>